<template>
	<view class="container">
			<uni-forms>
				<uni-forms-item label="货号" name="name">
					<uni-easyinput type="text" v-model="searchValue" placeholder="请输入货号" />
				</uni-forms-item> 
			</uni-forms>
			<button @click="submitForm" type="primary">搜索</button> 
			 
			<view class=""v-if="searchDataShow">
				<uni-card v-for="item in searchData">
					 <view>货号：<b>{{item.item_bn}}</b></view>
					 <view>商品名称：{{item.name}}</view>
					 <view>商品归属：{{item.itemscategory}}</view>
					 <view>位置：<b class="color">{{item.positionname}}</b></view>
					 <view>位置2：{{item.position2name}}</view>
					 <view>位置3：{{item.position3}}</view>
					 <button type="warn" size="mini" @click="edit(item.item_bn)">+修改</button>
				</uni-card>
			</view>
			<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
						:direction="direction" @trigger="trigger" @fabClick="fabClick" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue:'',
				searchData:[],
				show:false,
				searchDataShow:false,
				domain:"http://"+localStorage.getItem('config_ip')+":"+localStorage.getItem('config_port'),
					is_color_type: false,
					directionStr: '垂直',
					horizontal: 'right',
					vertical: 'bottom',

				direction: 'horizontal',
						pattern: {
							color: '#7A7E83',
							backgroundColor: '#fff',
							selectedColor: '#007AFF',
							buttonColor: '#007AFF',
							iconColor: '#fff'
						},
					content: [
						{
							iconPath: 'https://hellouniapp.dcloud.net.cn/static/image.png',
							selectedIconPath: 'https://hellouniapp.dcloud.net.cn/static/image-active.png',
							text: '新增+',
							active: false
						},
					
						{
							iconPath: 'https://hellouniapp.dcloud.net.cn/static/star.png',
							selectedIconPath: 'https://hellouniapp.dcloud.net.cn/static/star-active.png',
							text: '配置',
							active: false
						}
					]
			}
		},
		onBackPress() {
					if (this.$refs.fab.isShow) {
						this.$refs.fab.close()
						return true
					}
					return false
				},
		methods: {
			trigger(e) {
							console.log(e)
							this.content[e.index].active = !e.item.active
							uni.showModal({
								title: '提示',
								content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定')
										if(e.index == 1){
											uni.navigateTo({
												url:'/pages/config/config'
											})
										}
										if(e.index == 0){
											uni.navigateTo({
												url:'/pages/edit/edit'
											})
										}
										
									} else if (res.cancel) {
										console.log('用户点击取消')
									}
								}
							})
						},
						fabClick() {
							uni.showToast({
								title: '点击了悬浮按钮',
								icon: 'none'
							})
						},
						switchBtn(hor, ver) {
							if (hor === 0) {
								this.direction = this.direction === 'horizontal' ? 'vertical' : 'horizontal'
								this.directionStr = this.direction === 'horizontal' ? '垂直' : '水平'
							} else {
								this.horizontal = hor
								this.vertical = ver
							}
							this.$forceUpdate()
						},
						switchColor() {
							this.is_color_type = !this.is_color_type
							if (this.is_color_type) {
								this.pattern.iconColor = '#aaa'
								this.pattern.buttonColor = '#fff'
							} else {
								this.pattern.iconColor = '#fff'
								this.pattern.buttonColor = '#007AFF'
							}
						},
			edit(item_bn=''){
				uni.navigateTo({
					url:'/pages/edit/edit?item_bn='+item_bn
				})
			},
			submitForm(){
				if(!localStorage.getItem('config_ip') ){
					uni.showToast({
						duration:2000,
						icon:'error',
						title:'地址配置不能为空！'
					})
					uni.navigateTo({
						url:'/pages/config/config'
					})
					return false;
				}else{
					if(this.searchValue == ''){
						uni.showToast({
							duration:2000,
							icon:'error',
							title:'货号不能为空！'
						})
						return false;
					}else{
						//搜索
						this.getInfo(this.searchValue);
					}
				}
			}, 
			getInfo(searchValue){
				let that = this
				uni.request({
					url:that.domain+'/api/items/getInfo?item_bn='+searchValue,
					success(res) {
						console.log(res.data.data.list);
						if(res.data.data.list.length <1){
							uni.showToast({
								duration:2000,
								icon:'error',
								title:'未查询到，请添加！'
							})
							that.show = true;
							that.searchDataShow = false;
						}else{
							that.searchData = res.data.data.list
							that.searchDataShow = true;
						}
					}
				})
			},
			cancel(){
				
			},
			clear(){
				
			},
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
	.show_create{
		margin: 30rpx auto;
		text-align: center;
	}
	.color{color: red;}
</style>
